<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        姓名: <input type="text" v-model="info.account"> <br><br>
        密码: <input type="password" v-model="info.password"> <br><br>
        性别:
        男 <input type="radio" name="xb" v-model="info.sex" value="man">
        女 <input type="radio" name="xb" v-model="info.sex" value="woman"> <br><br>
        爱好:
        抽烟<input type="checkbox" value="smoke" v-model="info.hobby">
        喝酒<input type="checkbox" value="drive" v-model="info.hobby">
        烫头<input type="checkbox" value="tang" v-model="info.hobby"> <br><br>
        所属校区:
        <select v-model="info.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉 </option>
        </select> <br><br>
        其他信息
        <textarea v-model="info.other"></textarea> <br><br>
        <input type="checkbox" v-model="info.agree">阅读并接受 <a href="https://www.baidu.com">
            <用户协议>
        </a>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            info: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                city: '',
                agree:false,
                other: ''
            }

        }
    })
</script>

</html>